<template>

    <div class="page">
        <div class="pkBox">

            <!--头像名称-->
            <div class="pkHead" v-if="pkuserinfo.gametype == 'invite_std'">
                <div :class="[{invite:pkuserinfo.myuserType==0},'wo']">
                    <div class="avatar">
                        <img :src='userinfo.headimgurl' alt="">
                    </div>
                    <span class="name">{{ userinfo.nickname }}</span>
                </div>
                <div class="vs"></div>
                <div :class="[{invite:pkuserinfo.robotuserType==0},'ta']">
                    <div class="avatar">
                        <img :src='pkuserinfo.robotHeader' alt="">
                    </div>
                    <span class="name">{{ pkuserinfo.robotName }}</span>
                </div>
            </div>
            <div class="pkHead" v-else>
                <div class="wo">
                    <div class="avatar">
                        <img :src='userinfo.headimgurl' alt="">
                    </div>
                    <span class="name">{{ userinfo.nickname }}</span>
                </div>
                <div class="vs"></div>
                <div class="ta">
                    <div class="avatar">
                        <img :src='pkuserinfo.robotHeader' alt="">
                    </div>
                    <span class="name">{{ pkuserinfo.robotName }}</span>
                </div>
            </div>
            <div class="b0529">
                <div class="pkBody">

                    <div class="score">
                        <div class="wo">得分：<span v-model='showscore'>{{ showscore }}</span></div>
                        <div class="ta">得分：<span v-model='oshowscore'>{{ oshowscore }}</span></div>
                    </div>

                    <div class="content">

                        <!--当前题的得分-->
                        <div class="currentScore">
                            <div class="wo"></div>
                            <!--<div class="time">
                                <div class="progress"></div>
                                <div class="num"></div>
                            </div>-->
                            <div class="vanCountDown">
                                <van-circle v-model="currentRate" :rate="100" :speed="100" size="60px" color="#6bbfff"
                                            layer-color="#ddd">
                                    <van-count-down :time="vantime" format="ss" ref="countDown" :auto-start="false"
                                                    @finish="finish" @change="change" class="pk"/>
                                </van-circle>
                            </div>
                            <div class="ta"></div>
                        </div>

                        <div class="title">
                            <h3>{{ onoptions ? onoptions.title : '' }}</h3>
                        </div>

                        <!--选项-->
                        <div class="options">
                            <div class="item"
                                 v-if="onoptions"
                                 v-for="(items,i) in onoptions.options"
                                 :id="'optionselect'+items.id"
                                 :isright="items.isright"
                                 :values='items.id'
                            >
                                <div class="l">
                                    <span class="wo" :id="'woselect-'+items.id"></span>
                                </div>
                                <div class="m">
                                    <p>{{ op[i] }}{{ items.desc }}</p>
                                </div>
                                <div class="r">
                                    <span class="ta" :id="'taselect-'+items.id"></span>
                                </div>
                            </div>
                        </div>

                        <div class="order">
                            <span>第<em class="current">{{ pageconfig.current }}</em>题</span>
                            <span>/</span>
                            <span>共<em class="total">{{ pageconfig.count }}</em>题</span>
                        </div>

                    </div>


                </div>
            </div>

        </div>


    </div>
</template>

<script>
import Vue from 'vue';
import {Circle, CountDown} from 'vant';

Vue.use(CountDown);
Vue.use(Circle);

export default {
    name: 'pk',
    data() {
        return {
            uid: this.userHelper.getInfo('user_cert'),
            userinfo: {},
            pkuserinfo: {},
            pageconfig: {},
            answerarr: {},
            robotArr: [],
            op: ['A、', 'B、', 'C、', 'D、', 'E、', 'F、', 'G、', 'H、', 'I、', 'G、', 'K、', 'L、', 'M、', 'N、'],
            onoptions: [],
            robotanswer: 0,
            robottime: 0,
            clicklock: true,
            robotover: 0,
            userover: 0,
            myscore: 0,
            otherscore: 0,
            answerid: 0,
            myansweright: 0,
            items: 0,
            robotlog: [],
            mysuccess: false,
            othersuccess: false,
            postlock: false,
            gameType: 0,
            showscore: 0,
            oshowscore: 0,
            shownum: 0,
            vantime: 0, // 倒计时120秒 120*1000
            currentRate: 0, // 当前进度 100
            timeover: 0,
            robotclick: false,
        }

    },
    created: function () {
        // this.userinfo = this.userHelper.getInfo('');
        // this.userinfo.headimgurl = this.userinfo.headimgurl ? this.userinfo.headimgurl : appConfig.staticUrl + 'answerpk/img/avatar.jpg';
        //
        // this.pkuserinfo = JSON.parse(localStorage.getItem('pkuserinfo'));
        // this.pkuserinfo.robotName = this.pkuserinfo.robotName ? this.pkuserinfo.robotName : '匿名';
        // this.pkuserinfo.robotHeader = this.pkuserinfo.robotHeader ? this.pkuserinfo.robotHeader : appConfig.staticUrl + 'answerpk/img/avatar.jpg';
        //
        // this.gameType = this.pkuserinfo.gameType;
        //
        // if (this.pkuserinfo.gameType === 'invite_std') {
        //     this.gameType = 'pk_std'
        // }
        // if (this.pkuserinfo.gameType === 'single_std') {
        //     this.answerarr = (this.pkuserinfo.reultarr).sort();
        // }

        // 微信分享
        this.wxShare();
    },

    mounted: function () {
        const _this = this;

        // 发送 socket 消息
        // this.onopen();

        /**
         * 选择答案 单选 TODO
         * 标记正确或错误答案 item 加class  correct或者error
         * 标记我回答正确或错误 item子元素 wo 加class  correct或者error
         * 标记对方回答正确或错误 item子元素 ta 加class  correct或者error
         **/
        $(".options").on("click", ".item", function () {
            if (!_this.clicklock) {
                return false;
            }
            _this.clicklock = false;

            $(this).toggleClass("choose", true);
            if ($(this).attr('isright') == 1) {
                var nums = parseInt($('.van-count-down').html());
                _this.myscore = _this.myscore + nums;
                //$(this).find('.wo').toggleClass("correct", true);
                //$(this).toggleClass("correct", true);
                _this.shownum = nums;
                //_this.animateScore(nums,1);
                _this.myansweright = 1

            } else {
                //$(this).find('.wo').toggleClass("error", true);
                //$(this).toggleClass("error", true);
                _this.myansweright = 0;
            }
            _this.answerid = $(this).attr('values');


            _this.userover = 1;
            //提交答案
            if (_this.gameType == 'single_std') {

                if (_this.robotover == 1) {
                    if (_this.myansweright == 1) {
                        $('#optionselect' + _this.answerid).find('.wo').toggleClass("correct", true);
                        $('#optionselect' + _this.answerid).toggleClass("correct", true);
                        _this.showscore = _this.myscore;
                        _this.animateScore(_this.shownum, 1);
                    } else {
                        $('#optionselect' + _this.answerid).find('.wo').toggleClass("error", true);
                        $('#optionselect' + _this.answerid).toggleClass("error", true);
                    }
                    var isright = $('#optionselect' + _this.robotanswer).attr('isright');
                    if (isright == 1) {
                        $('#taselect-' + _this.robotanswer).toggleClass("correct", true);
                        $('#optionselect' + _this.robotanswer).toggleClass("correct", true);
                        _this.otherscore = parseInt(_this.otherscore) + parseInt(_this.robottime);

                        _this.oshowscore = _this.otherscore;
                        _this.animateScore(_this.robottime, 2);
                    } else {
                        $('#taselect-' + _this.robotanswer).toggleClass("error", true);
                        $('#optionselect' + _this.robotanswer).toggleClass("error", true);
                    }
                    _this.robotover = 0;//初始化数据
                    _this.userover = 0;
                    //_this.stopCountDown();
                    _this.reset();
                    if (_this.pageconfig.current == _this.pageconfig.count) {
                        _this.post();
                    } else {
                        _this.reset();
                        setTimeout(function () {
                            _this.sendpost(_this.myansweright);
                        }, 1000);
                    }
                }
            } else {
                _this.robotover = 0;//初始化数据
                _this.userover = 0;

                setTimeout(function () {
                    _this.sendpost(_this.myansweright);
                }, 1000);

            }

        });
    },
    activated: function () {
        // this.userinfo = {};
        // this.pkuserinfo = {};
        this.pageconfig = {};
        // this.answerarr = {};
        this.robotArr = [];
        this.onoptions = [];
        this.robotanswer = 0;
        this.robottime = 0;
        this.clicklock = true;
        this.robotover = 0;
        this.userover = 0;
        this.myscore = 0;
        this.otherscore = 0;
        this.answerid = 0;
        this.myansweright = 0;
        this.items = 0;
        this.robotlog = [];
        this.mysuccess = false;
        this.othersuccess = false;
        this.postlock = false;
        // this.gameType = 0;
        this.showscore = 0;
        this.oshowscore = 0;
        this.shownum = 0;
        this.vantime = 0; // 倒计时120秒 120*1000
        this.currentRate = 0; // 当前进度 100
        this.timeover = 0;
        this.robotclick = false;

        this.userinfo = this.userHelper.getInfo('');
        this.userinfo.headimgurl = this.userinfo.headimgurl ? this.userinfo.headimgurl : appConfig.staticUrl + 'answerpk/img/avatar.jpg';

        this.pkuserinfo = JSON.parse(localStorage.getItem('pkuserinfo'));
        this.pkuserinfo.robotName = this.pkuserinfo.robotName ? this.pkuserinfo.robotName : '匿名';
        this.pkuserinfo.robotHeader = this.pkuserinfo.robotHeader ? this.pkuserinfo.robotHeader : appConfig.staticUrl + 'answerpk/img/avatar.jpg';

        this.gameType = this.pkuserinfo.gameType;

        if (this.pkuserinfo.gameType === 'invite_std') {
            this.gameType = 'pk_std'
        }
        if (this.pkuserinfo.gameType === 'single_std') {
            this.answerarr = (this.pkuserinfo.reultarr).sort();
        }

        $(".currentScore .wo").empty();
        $(".currentScore .ta").empty();

        this.onopen();
    },
    methods: {
        // 倒计时开始
        start() {
            this.$nextTick(function () {
                this.$refs.countDown.start();
            });
        },
        pause() {
            this.$nextTick(function () {
                this.$refs.countDown.pause();
            })
        },
        reset() {
            this.$refs.countDown.reset();
            // this.currentRate = 100;
        },
        finish() {

        },
        change(timeData) {
            var _this = this;
            let seconds = timeData.days * 24 * 60 * 60 + timeData.hours * 60 * 60 + timeData.minutes * 60 + timeData.seconds;
            //_this.times = seconds;
            //console.log(timeData, "还剩:", seconds, "秒");
            if (seconds == 0 && _this.clicklock) {
                if (_this.gameType != 'single_std') {
                    _this.postnext();
                }
                console.log("倒计时结束");
                $('.item').each(function (index, element) {
                    if ($(this).attr('isright') == 1) {
                        $(this).toggleClass("choose", true);
                        //_this.postanswer();

                    }

                })
                _this.robotover = 0;//初始化数据
                _this.userover = 0;
                _this.timeover = 1

                if (_this.myansweright == 1) {
                    $('#optionselect' + _this.answerid).find('.wo').toggleClass("correct", true);
                    $('#optionselect' + _this.answerid).toggleClass("correct", true);
                    _this.showscore = _this.myscore;
                    console.log('change111');
                    //_this.animateScore(_this.shownum,1);
                } else {
                    $('#optionselect' + _this.answerid).find('.wo').toggleClass("error", true);
                    $('#optionselect' + _this.answerid).toggleClass("error", true);
                }
                var isright = $('#optionselect' + _this.robotanswer).attr('isright');
                if (isright == 1) {
                    $('#taselect-' + _this.robotanswer).toggleClass("correct", true);
                    $('#optionselect' + _this.robotanswer).toggleClass("correct", true);

                    if (_this.robotclick) {
                        console.log('结束', Math.abs(_this.otherscore), Math.abs(_this.robottime));
                        _this.otherscore = Math.abs(_this.otherscore) + Math.abs(_this.robottime);
                        console.log('结束1', _this.otherscore);
                        _this.oshowscore = _this.otherscore;
                    }

                    console.log('change222');
                    //_this.animateScore(_this.robottime ,2);
                } else {
                    $('#taselect-' + _this.robotanswer).toggleClass("error", true);
                    $('#optionselect' + _this.robotanswer).toggleClass("error", true);
                }

                if (_this.pageconfig.current > _this.pageconfig.count) {
                    _this.post();
                } else {
                    setTimeout(function () {
                        _this.sendpost(_this.myansweright);
                    }, 1000);
                }
            } else {
                if (_this.gameType == 'single_std') {
                    if (_this.robottime == seconds) {
                        _this.robotover = 1
                    }
                    if (_this.userover == 1) {
                        if (_this.robotover == 1) {
                            if (_this.myansweright == 1) {
                                $('#optionselect' + _this.answerid).find('.wo').toggleClass("correct", true);
                                $('#optionselect' + _this.answerid).toggleClass("correct", true);
                                _this.showscore = _this.myscore;
                                _this.animateScore(_this.shownum, 1);
                            } else {
                                $('#optionselect' + _this.answerid).find('.wo').toggleClass("error", true);
                                $('#optionselect' + _this.answerid).toggleClass("error", true);
                            }
                            var isright = $('#optionselect' + _this.robotanswer).attr('isright');
                            if (isright == 1) {
                                $('#taselect-' + _this.robotanswer).toggleClass("correct", true);
                                $('#optionselect' + _this.robotanswer).toggleClass("correct", true);
                                _this.otherscore = Math.abs(_this.otherscore) + Math.abs(_this.robottime);

                                _this.oshowscore = _this.otherscore;
                                _this.animateScore(_this.robottime, 2);
                            } else {
                                $('#taselect-' + _this.robotanswer).toggleClass("error", true);
                                $('#optionselect' + _this.robotanswer).toggleClass("error", true);
                            }

                            _this.userover = 0;
                            _this.robotover = 0;
                            if (_this.pageconfig.current == _this.pageconfig.count) {
                                _this.post();
                            } else {
                                setTimeout(function () {
                                    _this.sendpost(_this.myansweright);
                                }, 1000);
                            }
                        }
                    }
                }
            }
            this.currentRate = seconds / (this.vantime / 1000) * 100;
        },
        /*
         * 得分动画
         * @return {[type]} [description]
         */
        animateScore: function (num, istype) {
            num = Math.abs(num);

            if (num > 0) {
                if (istype == 1) {
                    var $scoreWo = $(".currentScore .wo");
                    $scoreWo.empty().toggleClass("active", false);
                    setTimeout(function () {
                        $scoreWo.html("+" + num).toggleClass("active", true);
                    }, 100)
                } else {
                    var $scoreTa = $(".currentScore .ta");
                    $scoreTa.empty().toggleClass("active", false);
                    setTimeout(function () {
                        $scoreTa.html("+" + num).toggleClass("active", true);
                    }, 100)
                    console.log('对方加的', num);
                }

            }


        },

        // 加入发送消息
        goRoomWithPerson: function (text) {
            this.socket.sendMessage({
                'gameType': this.gameType,
                'type': 'game',
                'uid': this.uid,
                'roomId': this.pkuserinfo.roomId,
                'gameStatus': 'getQuestion',
                'answerlogs': text,
            });
        },

        // 初始化下一题
        inittext: function () {
            var _this = this;

            _this.shownum = 0;
            _this.robotover = 0;//初始化数据
            _this.userover = 0;
            _this.myansweright = 0;
            $('.item,.wo,.ta').removeClass('correct');
            $('.item,.wo,.ta').removeClass('choose');
            $('.item,.wo,.ta').removeClass('error');

            if (_this.onoptions !== undefined) {
                //_this.initCountDown(".num",_this.onoptions.time);
                //_this.startCountDown(_this.onoptions.time);
                _this.reset();
                _this.vantime = (parseInt(_this.onoptions.time) + 1) * 1000;
                _this.currentRate = 100;
                _this.start();
            }
        },

        onopen: function () {
            const progress = this.pkuserinfo.reultarr ? (this.pkuserinfo.reultarr).sort() : [];
            console.log('pk.progress', progress);
            let text = '';
            for (let p in progress) {
                text += progress[p] + '@';
            }
            this.goRoomWithPerson(text);
        },

        onmessage: function (e) {
            var _this = this;
            var rs = JSON.parse(e.data);
            console.log(rs)
            if (rs.code == 0 && rs.type == 'answerDetail') {
                _this.pageconfig = rs.config;
                _this.clicklock = true;

                // 开始答题
                _this.items = rs.data;
                _this.onoptions = _this.items[parseInt(_this.pageconfig.current) - 1]
                _this.reset();
                _this.vantime = (parseInt(_this.onoptions.time) + 1) * 1000;
                _this.currentRate = 100;
                _this.start();
                //_this.startCountDown(_this.onoptions.time);//_this.gettimes(_this.onoptions.time);//
                if (_this.gameType == 'single_std' && _this.onoptions) {
                    _this.robotlog = rs.robotArr;
                    _this.robotanswer = rs.robotArr[_this.onoptions.id].answerId;
                    _this.robottime = parseInt(_this.onoptions.time) - parseInt(rs.robotArr[_this.onoptions.id].answerTime);
                    _this.robotArr = rs.robotArr;

                }

            }
            if (rs.code == 3 && rs.type == 'joinRoomByPK') {

                _this.goRoomWithPerson();

            }
            if (rs.code == 4 && rs.type == "joinRoomAgain") {

                _this.goRoomWithPerson();

            }
            if (rs.code == 0 && rs.type == 'postSuccess') {
                _this.clicklock = true;
                _this.shownum = 0;
                _this.robotover = 0;//初始化数据
                _this.userover = 0;
                _this.myansweright = 0;
                _this.pageconfig = rs.config;
                _this.onoptions = _this.items[parseInt(_this.pageconfig.current) - 1]
                //console.log(_this.onoptions );

                if (_this.gameType == 'single_std' && _this.onoptions) {
                    _this.robotanswer = _this.robotlog[_this.onoptions.id].answerId;
                    _this.robottime = parseInt(_this.onoptions.time) - parseInt(_this.robotlog[_this.onoptions.id].answerTime);
                }
                _this.inittext();
            }
            //跳入下一题目
            if (rs.code == 3 && rs.type == 'postSuccess') {
                _this.pause();
                _this.postshow();

                setTimeout(function () {
                    _this.pageconfig = rs.config;
                    _this.onoptions = _this.items[parseInt(_this.pageconfig.current) - 1]

                    if (_this.onoptions) {
                        _this.clicklock = true;
                        _this.inittext();
                    } else {
                        _this.post();
                    }
                }, 1000);

            }
            if (rs.code == 0 && rs.type == 'myPostResult') {
                _this.myscore = rs.score;
                console.log('我的分数', rs.score);

                if (_this.pageconfig.count == _this.pageconfig.current) {
                    if (_this.othersuccess) {
                        _this.post();
                    }
                    _this.mysuccess = true
                }

            }
            if (rs.code == 1 && rs.type == 'quitSuccess') {
                //退出房间成功
                // _this.ws.onclose();
            }
            if (rs.code == 1 && rs.type == 'otherPostResult') {
                //对方答题
                console.log(rs);
                _this.robotanswer = rs.ranswer;
                _this.robottime = Math.abs(_this.otherscore) - Math.abs(rs.score);
                _this.robotclick = false;
                console.log('对方分数', Math.abs(_this.otherscore), Math.abs(rs.score), _this.robottime, rs.score);

                _this.otherscore = rs.score;
                console.log('对方分数1', rs.score);
                if (_this.pageconfig.count == _this.pageconfig.current) {
                    _this.othersuccess = true;
                    if (_this.mysuccess) {
                        _this.post();
                    }
                }


                //_this.stopCountDown();
                //that.personAnswer(rs.is_right, rs.ranswer,rs.score);
            }
        },
        /**
         * 提交答案
         * @return {boolean}
         */
        sendpost: function (isRight) {
            this.socket.sendMessage({
                'gameType': this.gameType,
                'type': 'game',
                'uid': this.uid,
                'roomId': this.pkuserinfo.roomId,
                'gameStatus': 'post',
                'num': this.pageconfig.count,
                'qid': this.onoptions ? this.onoptions.id: 0,
                'reply': this.answerid,
                'score': this.myscore,
                'isright': isRight,
                'sort': this.pageconfig.current,
            });
        },
        /**
         *下一题
         *@return {[type]} [description]
         */
        postnext: function () {
            this.socket.sendMessage({
                'gameType': this.gameType,
                'type': 'game',
                'roomId': this.pkuserinfo.roomId,
                'gameStatus': 'postNext',
                'num': this.pageconfig.count,
                'sort': this.pageconfig.current,
            });
        },
        /**
         * 提交结果
         * @return {[type]} [description]
         */
        postshow: function () {
            var _this = this;
            _this.showscore = _this.myscore;
            _this.oshowscore = _this.otherscore;
            $('.item,.wo,.ta').removeClass('choose');
            if (_this.myansweright == 1) {

                $('#optionselect' + _this.answerid).find('.wo').toggleClass("correct", true);
                $('#optionselect' + _this.answerid).toggleClass("correct", true);
                //console.log('post111');
                _this.animateScore(_this.shownum, 1);
            } else {
                $('#optionselect' + _this.answerid).find('.wo').toggleClass("error", true);
                $('#optionselect' + _this.answerid).toggleClass("error", true);
            }
            var isright = $('#optionselect' + _this.robotanswer).attr('isright');
            if (isright == 1) {
                $('#taselect-' + _this.robotanswer).toggleClass("correct", true);
                $('#optionselect' + _this.robotanswer).toggleClass("correct", true);
                if (_this.gameType == 'single_std') {
                    _this.otherscore = parseInt(_this.otherscore) + parseInt(_this.robottime);
                } else {
                    _this.otherscore = parseInt(_this.otherscore);
                }
                //console.log('post222');
                _this.animateScore(Math.abs(_this.robottime), 2);
            } else {
                $('#taselect-' + _this.robotanswer).toggleClass("error", true);
                $('#optionselect' + _this.robotanswer).toggleClass("error", true);
            }
        },
        /**
         * 提交结果
         * @return {[type]} [description]
         */
        post: function () {
            var reusltlog = {};
            var _this = this;
            var type, isrobot = 0;

            if (_this.pkuserinfo.gameType == 'single_std') {
                type = 1;
                isrobot = 1;
                if (_this.postlock) {
                    return false;
                }
                _this.postlock = true;
            }
            if (_this.pkuserinfo.gameType == 'invite_std') {
                type = 2;
                if (_this.postlock) {
                    return false;
                }
                _this.postlock = true;
            }
            if (_this.pkuserinfo.gameType == 'pk_std') {
                type = 1;
                if (_this.postlock) {
                    return false;
                }
                _this.postlock = true;
            }
            // if(!_this.timeover){
            //
            // }
            _this.postshow();

            reusltlog['otherimg'] = _this.pkuserinfo.robotHeader;
            reusltlog['myname'] = _this.userinfo.nickname;
            reusltlog['myimg'] = _this.userinfo.headimgurl;
            reusltlog['myscore'] = _this.myscore;
            reusltlog['othername'] = _this.pkuserinfo.robotName;

            reusltlog['otherscore'] = _this.otherscore;
            reusltlog['isrobot'] = isrobot;
            localStorage.setItem('reultlog', JSON.stringify(reusltlog));

            var iswin = 0;
            if (_this.myscore > _this.otherscore) {
                iswin = 1;
            }
            if (_this.myscore == _this.otherscore) {
                iswin = 2;
            }

            // 提交结果
            this.socket.sendMessage({
                'gameType': 'submit',
                'roomId': _this.pkuserinfo.roomId,
                'uid': _this.uid,
                'pk_user_id': isrobot ? 0 : localStorage.getItem('pk_user_id'),
                'isWin': iswin,
                'isRobot': isrobot,
            });
            localStorage.removeItem('pk_user_id');

            // 跳到结果页
            setTimeout(function () {
                _this.$emit('handle', {name: 'pkResult'});
            }, 2000);
        },

        // 微信分享
        wxShare: function () {
            this.wxHelper.init({
                types: ['share'],
                callback: (status) => {
                    if (status) {
                        this.wxHelper.shareMessage({
                            title: '我正在参加“党史天天学”知识竞答双人对战，快来挑战我吧！', // 分享标题
                            desc: '', // '我正在参加“党史天天学”知识竞答双人对战，快来挑战我吧！', // 分享描述
                            link: appConfig.onLineApiDomain + '/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: appConfig.onLineDomain + '/h5/img/wxShare.jpg', // 分享图标
                        });
                    }
                }
            });
        },
    },
}

</script>

<style lang="scss">
.vanCountDown {
    position: relative;

    .van-count-down {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

        &.pk {
            color: #333;
            font-size: 24px;
        }
    }
}
</style>
